<template>
  <div>
    <el-card class="search-card">
      <BasicForm
        ref="formData"
        :isScalingBtn="false"
        formItemWidth="80px"
        :formColumns="formItemList"
        :dataSource="formData"
        :handleSearchForm="handleQueryForm"
        @getFormData="getFormData"
      />
    </el-card>
    <el-card class="table-card">
      <BasicTable
        showPagination
        showActionCol
        :defaultMinWidth="100"
        :dataSource="tableInfo.list"
        :columns="tableInfo.columns"
        :loading="tableInfo.loading"
        :tableHeight="480"
        :actionRender="actionRender"
        :actionColWidth="100"
        :pageSizes="pageSizes"
        :pagination="pagination"
        :total="total"
        @pageChange="handlePageChange"
        @pageSizeSelect="handlePageSizeChange"
      >
        <el-row slot="content_context" type="flex">
          <el-badge
            :value="seniorLinked.skuNos.length || ''"
          >
            <el-button
              type="primary"
              size="mini"
              @click="handleSeniorLinked"
            >
              高级查询
            </el-button>
          </el-badge>
          <el-button
            v-if="showBtn('导出')"
            style="margin-left: 10px;"
            type="primary"
            size="mini"
            :loading="btnLoading.export"
            @click="handleExport"
          >导出</el-button>
        </el-row>
      </BasicTable>
    </el-card>
    <!-- 高级关联 -->
    <SeniorLinkedDialog
      showClearBtn
      :visible.sync="seniorLinked.visible"
      :columns="seniorLinked.columns"
      :dataSource="seniorLinked.dataSource"
      @seniorSearchResult="getTableDataBySeniorLinked"
      @clear="clearSeniorResults"
    />
  </div>
</template>
<script>
import BasicForm from '@/components/BasicForm';
import BasicTable from '@/components/skusTable';
import skusPage from '@/mixins/commodity/skusPage';
import { FORM_ITEMS, TABLE_COLUMNS } from './constants';
import { getInitFormData } from '@/utils/getUtils';
import SeniorLinkedDialog from '@/components/SeniorLinkedDialog';
import {
  setAuthBtnId,
  handleOpenNewPage,
  createExcelByExport,
  generateUuid,
} from '@/utils/bizUtils';
import {
  queryAllSkuListService,
  allskuExportService
} from '@/api/commodity/commodityManage/library';

export default {
  mixins: [skusPage],
  components: {
    BasicForm,
    BasicTable,
    SeniorLinkedDialog
  },
  data () {
    return {
      formItemList: FORM_ITEMS,
      formLoading: false,
      formData: getInitFormData(FORM_ITEMS),
      tableInfo: {
        list: [],
        columns: TABLE_COLUMNS,
        loading: false,
      },
      // 商品详情
      productTypeViews: {
        0: 'SPUManageDetail', // 正常商品
        1: 'temporaryGoodsDetail', // 线索商品
        2: '', // 客户专属商品
        3: '', // 一物多码商品
        5: 'temporaryProjectGoodsDetail', // 临时项目商品
        6: 'latentProductList', // 潜在商品
      },
      pageSizes: [10, 100, 1000],
      seniorLinked: {
        visible: false,
        columns: [{ label: 'SKU编码', prop: 'skuNo', type: 'textarea' }],
        dataSource: [{ skuNo: '' }],
        skuNos: [], // 高级关联的结果集
      },
      btnLoading: {
        export: false
      }
    }
  },
  mounted () {
    // this.getTableData()
  },
  methods: {
    actionRender (h, { row }) {
      if ([0, 1, 5, 6].includes(row.enumTempProduct)) {
        return (
          <div class="table-action">
            <el-button
              size="mini"
              type="text"
              onClick={() => this.handleViewSkuInfo(row)}
            >查看商品信息</el-button>
          </div>
        );
      }
    },
    // 导出
    async handleExport () {
      setAuthBtnId('导出')
      const { skuNo } = this.formData
      const data = {
        skuNos: skuNo ? skuNo.split(',') : this.seniorLinked.skuNos,
        ..._.omit(this.formData, ['skuNo'])
      }
      const hasNullVal = Object.values(data).every(item => !item || item.length == 0)
      if (hasNullVal) return this.$message.warning('请至少输入一个查询条件')
      const loadingFn = state => { this.btnLoading.export = state }
      const res = await allskuExportService(data, loadingFn)
      createExcelByExport({ res, excelTitle: `商品海量库_${generateUuid()}` })
    },
    // 高级关联
    handleSeniorLinked () {
      this.seniorLinked.visible = true;
    },
    // 获取表格数据 by 高级关联
    async getTableDataBySeniorLinked (skuNos) {
      this.seniorLinked.skuNos = skuNos
      this.getTableData()
    },
    clearSeniorResults () {
      this.seniorLinked.skuNos = []
    },
    // 获取表格数据
    async getTableData () {
      const { skuNo } = this.formData;
      const data = {
        ...this.paginationParams,
        skuNos: skuNo ? skuNo.split(',') : this.seniorLinked.skuNos,
        ..._.omit(this.formData, ['skuNo'])
      };
      setAuthBtnId();
      const res = await queryAllSkuListService(
        data,
        state => { this.tableInfo.loading = state }
      );
      if (res?.retData) {
        this.tableInfo.list = res.retData.results;
        this.total = res.retData.totalNum;
      }
    },
    // 商品详情
    handleViewSkuInfo (row) {
      handleOpenNewPage(this, {
        name: this.productTypeViews[row.enumTempProduct],
        query: { skuNo: row.skuNo, productUuid: row.enumTempProduct == 0 ? row.productUuid : row.skuUuid } })
    }
  }
}
</script>
